<template>
  <div class="w-full">
    <a-form :model="form" layout="inline" autocomplete="off">
      <a-form-item
        v-for="item in formItem"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        :style="{ marginBottom: itemMB }"
      >
        <a-input
          v-if="item.type === 'input'"
          v-model:value="form[item.name]"
          :style="{ width: item?.width ? item.width : '' }"
        >
          <template v-if="item.unit" #addonAfter> {{ item.unit }} </template>
        </a-input>
        <a-select
          v-if="item.type === 'select'"
          v-model:value="form[item.name]"
          :allow-clear="true"
          v-bind="item.otherOption"
          :style="{ width: item?.width ? item.width : '186px' }"
        >
          <a-select-option
            v-for="option in item.optionsConfig.option"
            :key="option[item.optionsConfig.optionValue]"
            :value="option[item.optionsConfig.optionValue]"
          >
            {{ option[item.optionsConfig.optionLabel] }}
          </a-select-option>
        </a-select>
        <a-range-picker
          v-if="item.type === 'range'"
          v-model:value="form[item.name]"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          :value-format="'YYYY-MM-DD HH:mm:ss'"
          v-bind="item.otherOption"
        />
        <a-time-range-picker
          v-if="item.type === 'timeRange'"
          v-model:value="form[item.name]"
          format="HH:mm:ss"
          :value-format="'HH:mm:ss'"
          v-bind="item.otherOption"
        />
        <a-checkbox-group
          v-if="item.type === 'checkbox'"
          v-model:value="form[item.name]"
          :options="item.options"
        />
        <a-cascader
          v-if="item.type === 'cascader'"
          v-model:value="form[item.name]"
          style="width: 186px"
          v-bind="item.otherOption"
          max-tag-count="responsive"
          :options="item.options"
        ></a-cascader>
        <a-tree-select
          v-if="item.type === 'treeSelect'"
          v-model:value="form[item.name]"
          :style="{ width: item?.width ? item.width : '200px' }"
          :tree-data="item.treeData"
          allow-clear
          tree-node-filter-prop="label"
          v-bind="item.otherOption"
        />
      </a-form-item>

      <a-form-item :style="{ marginBottom: itemMB }">
        <a-space>
          <a-button type="primary" @click="search">
            <template #icon> <SearchOutlined style="color: #fff" /> </template>
            查询
          </a-button>
          <a-button @click="clearData">
            <template #icon><UndoOutlined /></template>
            重置
          </a-button>
          <slot name="btns"></slot>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
  <div v-if="lineShow" class="w-full h-[2px] bg-[rgba(160,175,196,0.2)] mb-6"></div>
</template>
<script setup>
import { getCurrentInstance, ref, toRefs, watch } from 'vue'
import { SearchOutlined, UndoOutlined } from '@ant-design/icons-vue'
const { proxy } = getCurrentInstance()
const props = defineProps({
  formItem: {
    // form查询项
    type: Array,
    default: () => []
  },
  formData: {
    // form查询数据
    type: Object,
    default: () => {
      return {}
    }
  },
  clearBtnFlag: {
    type: Boolean,
    default: () => true
  },
  itemMB: {
    type: String,
    default: () => {
      return '24px'
    }
  },
  lineShow: {
    type: Boolean,
    default: true
  }
})
// 声明触发的事件
const emit = defineEmits(['searchForm', 'clearForm'])
const form = ref(JSON.parse(JSON.stringify(proxy.formData))) // form查询数据
watch(
  () => proxy.formData,
  () => {
    form.value = {
      ...form.value,
      ...proxy.formData
    }
  }
)
const { formItem } = toRefs(props)
const clearData = () => {
  form.value = {
    current: 1,
    pageSize: 20
  }
  formItem.value.forEach((item) => {
    if (item.filedType === Array) {
      form.value[item.name] = []
    } else {
      form.value[item.name] = ''
    }
  })
  // console.log(form.value, 'form.value')
  emit('clearForm', form.value)
}
const search = () => {
  emit('searchForm', form.value)
}
</script>

<style scoped lang="less"></style>
